<template>
  <div >
    
     <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }" >电商后台管理</el-breadcrumb-item>
  
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item >商品添加</el-breadcrumb-item>
</el-breadcrumb>
 <div class="container">
    <div class="main">
      <div class="nameMain information">
        <label for>商品名称：</label>
        <input type="text" v-model="addone.goodsname" />
      </div>
      <div class="ageMain information">
        <label for>商品价格：</label>
        <input  type="text" v-model="addone.price" />
      </div>
      <div class="genderMain information">
        <label for>商品产地：</label>
        <input type="text" v-model="addone.orgin" />
      </div>
      <div class="genderMain information">
        <label for>商品描述：</label>
        <input type="text" v-model="addone.descs" />
      </div>
      <div class="characterMain information">
        <label for>商品规格：</label>
        <input  type="text" v-model="addone.guige" />
      </div>
      <div class="characterMain information">
        <label for>商品类型:</label>
        <input  type="text" v-model="addone.types"/>
      </div>
       <div class="characterMain information">
        <label for>在售店铺:</label>
        <input  type="text" v-model="addone.shop"/>
      </div>
      <div class="equipMain information">
        <label for>商品数量：</label>
        <input  type="text" v-model="addone.num"/>
      </div>
      <div class="designationMain information">
        <label for>商品图片</label>
        <el-upload
          class="avatar-uploader"
          action="/stroe/addImgs"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="temporaryImg" :src="temporaryImg" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
       <div class="equipMain information">
        <label for>详情：</label>
        <el-upload
          class="upload-demo"
          action="/stroe/uploadImgs"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="success"
          list-type="picture"
          :multiple="true"
        >
          <el-button size="small" type="primary">点击上传</el-button> -->
           <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </div> 

      <div class="information button">
        <el-button type="success" @click="add" >确认添加</el-button>
      </div>
    </div>
  </div>
    
     
  </div>
</template>

<script>
// import axios from "axios";mapActions()
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("product");
export default {
  data() {
    return {
      addone:{
        goodsname:"1",
        goodsimg: "",
        orgin:"1",
        price: "1",
        num: "1",
        types: "1",
        shop:"1",
        particularsImg: [],
        
        guige:"1",
        descs:"1",
       
      },
      temporaryImg: "",
      detailsImge: [],
      fileList: [],
    };
  },
  
     computed:{//通过计算属性获取数据
     ...mapState(["producdata"])
    },
  methods:{
      // ...mapActions(["getproduc","renoveone","addproduc"]),
       ...mapActions(["updateInventoryAsync", "addproduc"]),
    handleAvatarSuccess(res, file) {
      this.temporaryImg = URL.createObjectURL(file.raw);
      this.addone.goodsimg = file.response[0];
      // console.log('1223',this.addone);
    },
    success(file, fileList) {
      console.info(this.addone.price)
      this.addone.particularsImg.push(file[0]);
    },
    handleRemove(file, fileList) {
      console.log("handleRemove", file, fileList);
    },
    handlePreview(file) {
      console.log("handlePreview", file);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    add(){
        console.log('1223',this.addone);
       this.addproduc(this.addone)
    }
  },
   created(){
    // this.addone=this.merchantId;
    // console.log("addone")
  }


};
</script>


<style scoped>
.container {
  width: 700px;
 
  margin: 0 auto;
}
.avatar-uploader{
  /* background-color: red; */
  border: 1px solid #999;
}
.main {
  width: 500px;
  margin-top:20px;
  margin-left: 80px;
  padding: 20px;
  border: 1px solid #999;
  border-radius: 10px;
}
.main h3 {
  background-color: rgb(160, 160, 160);
  color: #fff;
  line-height: 35px;
  text-align: start;
  padding-left: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.information {
  font-size: 16px;
  display: flex;
  margin: 10px 0px;
  align-content: center;
}
.button {
  display: flex;
  justify-content: center;
}
.information input {
  outline: none;
  height: 30px;
  width: 300px;
  padding-left: 5px;
}
.information select {
  height: 25px;
  width: 50px;
  outline: none;
}
.information span {
  margin: 0px 10px 0px 5px;
}
.imgMain input {
  width: 170px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader-icon {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.avatar {
  width: 100px;
  height: 100px;
}
.el-upload-dragger {
  width: 150px;
  height: 150px;
}
.el-upload-dragger .el-icon-upload {
  margin: 20px 0 16px;
}
.el-main[data-v-452a4712] {
  text-align: start;
}
.el-main {
  display: flex;
  justify-content: center;
}
</style>
